<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            line-height: 30px;
            margin: 3px 0;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建4个移民li</button>
<ul>
    <li>我是土著li</li>

    <li>我是土著li</li>
    <li>我是土著li</li>

    <li>我是土著li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

//    for(var i=0;i<liArr.length;i++){
//        liArr[i].onclick = function () {
//            alert("我是土著li");
//        }
//    }

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");

            newLi.innerHTML = "我是移民li";


            ul.appendChild(newLi);

        }
    }


    //普通的时间绑定，没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托！
    //事件委托
    ul.onclick = function (event) {
        //获取事件触动的时候传递过来的值
        event = event || window.event;
        var aaa = event.target?event.target:event.srcElement;
        //判断标签名，如果是li标签弹窗
        if(aaa.tagName === "LI"){
            alert("我是li");
        }
    }



</script>

</body>
</html>